(function () {
    let container = document.querySelector('.container'),
        swiper = container.querySelector('.swiper'),
        wrapper = swiper.querySelector('.swiper-wrapper'),
        slideList = wrapper.querySelectorAll('.swiper-slide'),
        paginationList = Array.from(container.querySelectorAll('.pagination span')),
        [btnPrev, btnNext] = Array.from(container.querySelectorAll('.btn'));
    // console.log(container,swiper,wrapper,slideList,paginationList);

    let W = container.offsetWidth; //记录容器的宽度【这里是1226】
    let count = slideList.length;
    //slide的数量
    let step = 0; //当前展示slide的索引【默认0】
    let autoTimer = null; //存储自动轮播的定时器
    let interval = 3000; //自动轮播间隔的时间

    // 控制分页器的焦点对齐
    const paginationFocus = function () {
        let temp = step; //赋值给temp是为了不修改step【step非常重要，我们是基于step来进行轮播的】
        if (temp === count - 1) temp = 0;
        paginationList.forEach((item, index) => {
            // 每个span标签的索引如果等于当前展示的索引，哪一个span标签上就有一个active的类名
            item.className = index === temp ? 'active' : '';
        });
    };

    // 下一张
    const moveNext = function moveNext() {
        if (step === count - 1) {
            // 说明当前正处于克隆的这一张：立即跳回第一张，然后再运动到第二张
            wrapper.style.transitionDuration = `0s`;
            wrapper.style.left = '0px';
            step = 0;
            let temp = wrapper.offsetWidth; //获取元素样式，仅仅是为了刷新渲染队列，让其立即回到第一张【不然就会存在渲染队列一起刷新，减少回流现象】
        }
        // console.log(step);
        step++;
        wrapper.style.transitionDuration = `0.5s`;
        wrapper.style.left = `${-step * W}px`;
        paginationFocus();
    };
    autoTimer = setInterval(moveNext, interval);

    //上一张
    const movePrev = function movePrev() {
        if (step === 0) {
            // 说明当前正处于第一张：立即跳回最后一张，然后再运动到倒数第二张
            wrapper.style.transitionDuration = `0s`;
            wrapper.style.left = `${-step*W}px`;
            step = count - 1;
            let temp = wrapper.offsetWidth; //获取元素样式，仅仅是为了刷新渲染队列，让其立即回到第一张【不然就会存在渲染队列一起刷新，减少回流现象】
        }
        step--;
        wrapper.style.transitionDuration = `0.5s`;
        wrapper.style.left = `${-W * step}px`;
        paginationFocus();
    };


    // 点击分页器焦点实现切换
    //【循环事件绑定为了不产生闭包，最好不要用forEach循环】
    const paginationClick = function paginationClick() {
        let i = 0,
            item;
        for (i; i < paginationList.length; i++) { //小括号和大括号尽可能不要出现let，容易产生块级上下文
            item = paginationList[i];
            item.index = i;
            item.onclick = function () {
                let index = this.index;
                if (step === index) return; //如果点击的这一项和当前索引是相等的，那就不用做什么事情了
                step = index;
                wrapper.style.transitionDuration = `0.5s`;
                wrapper.style.left = `${-W * step}px`;
                paginationFocus();
            }
        }
    }
    paginationClick();

    // 点击左右按钮
    btnNext.onclick = utils.throttle(moveNext, 500);
    btnPrev.onclick = utils.throttle(movePrev, 500);

    //控制轮播的开始和暂停
    if (moveNext === null) //如果没有定时器
        autoTimer = setInterval(autoMove, interval);

    container.onmouseenter = function () {
        // 鼠标移入:轮播暂停
        clearInterval(autoTimer); //通过这个数字清除定时器【从系统移除】
        autoTimer = null;
    };

    container.onmouseleave = function () {
        // 鼠标离开容器：开启自动轮播
        autoTimer = autoTimer = setInterval(moveNext, interval);
    }

    document.onvisibilitychange = function () {
        // onvisibilitychange事件->监测当前页卡是否隐藏
        if (document.hidden) {
            //切换至其他页卡，当前页面隐藏：暂停自动轮播
            clearInterval(autoTimer);
            autoTimer = null;
        }
        // 切换回当前页面
        if (moveNext === null)
            autoTimer = autoTimer = setInterval(moveNext, interval);
    }


})();